<template>
  <div class="app-container">
    <div id="stateStep" class="stateStep">
      <div v-for="(item, index) in stateSteps" :key="index" class="area">
        <router-link :to="{ name: item.pathName }">
          <div class="linkText" v-html="item.name" />
        </router-link>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      stateSteps: [
        { name: 'Sync', pathName: 'Sync' },
        { name: 'Orders', pathName: 'Orders' },
        { name: 'Online<br/>Fulfill', pathName: 'Produce' },
        { name: 'Self<br/>Fulfill', pathName: 'Packing' },
        { name: 'Fulfillment', pathName: 'Shipping' },
        { name: 'Delete', pathName: 'Delete' }
      ]
    };
  },
  created() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.app-container {
  padding-bottom: 0;
}
.stateStep {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  border-bottom: 1px solid $themeColor;
  .area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > a {
      display: inline-block;
      width: 60px;
      height: 60px;
      font-size: 12px;
      color: #999;
      line-height: 48px;
      text-align: center;
      border-radius: 50%;
      border: 6px solid #ddd;
      cursor: pointer;
      background: #f9f9f9;
      &.router-link-exact-active {
        position: relative;
        border-color: $themeColor;
        color: $themeColor;
        &:after {
          position: absolute;
          bottom: -16px;
          left: 50%;
          margin-left: -10px;
          content: '';
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 12px solid $themeColor;
        }
      }
      .linkText {
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 14px;
        justify-content: center;
      }
    }
  }
}
</style>
